<template>
    <el-select v-model="userSelect" filterable :loading="loading" clearable @change="handelChange" style="width: 50%;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
                {{ item.no }}
            </span>
        </el-option>
    </el-select>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import userAPI from "@/api/user";
import useStore from "@/store/index";
const store = useStore();
const emit = defineEmits(["fillUser"]);
const userSelect = ref("")
const loading = ref(true);
onMounted(() => {
    getUserList();
});
const options = ref([]);
const getUserList = () => {
    loading.value = true;
    userAPI.getSameDepartment(store.user.departmentId).then((res) => {
        options.value = res.data.page.list.map(item => {
            return {
                label: item.name,
                value: item.id,
                no: item.no
            }
        })
    });
    loading.value = false;
};
const handelChange = (data) => {
    emit("fillUser", data);
};
const clear = () => {
    userSelect.value = "";
};
defineExpose({
    clear
})
</script>